import React,{
    Component
} from 'react';
import {
    Button,
    Image,
    View,
    Text,
    StyleSheet,
    Dimensions,
    FlatList,
    TouchableOpacity,
} from 'react-native';
import color from '../../macro/color';
import NavBar from "../../common/NavBar";

export default class DiscoveryPage extends Component {
    static navigationOptions = {
        headerTitle:' 发现',
    };

    render() {
        return (
            <View style={styles.container}>
                <NavBar title={'发现'}/>
                <FlatList
                    data={[
                        {title: '我的课堂', cover: require('../../image/discovery/图片1-发现.png'), content: '【组网知识】常见的智能组网方案'},
                        {title: '发现好物', cover: require('../../image/discovery/图片2-发现.png'), content: '【前沿产品】vivo NEX真旗舰，蓝绿大厂你居然偷偷变了！'},
                        {title: '能力提升', cover: require('../../image/discovery/图片3-发现.png'), content: '【学习培训】中国电信智慧家庭，让未来触手可及！'}
                    ]}
                    renderItem={this.renderItem.bind(this)}
                    keyExtractor={this._keyExtractor}
                />
            </View>
        );
    };

    renderItem({item, index}) {
        return (
            <TouchableOpacity activeOpacity={0.5} onPress={this._onPressItem.bind(this,item,index)}>
                <View style={styles.item}>
                    <Text style={styles.item_text}>{item.title}</Text>
                    <View style={[styles.item_image_view]}>
                        <Image style={[styles.item_image, {position: 'absolute'}]} source={item.cover}/>
                        <Image style={[styles.item_content_img, {position: 'absolute', bottom: 0}]} source={require('../../image/discovery/图片文字框.png')}/>
                        <Text style={[styles.item_content, {position: 'absolute', bottom: 0, left: 5}]} numberOfLines={1} >{item.content}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    };

    _keyExtractor = (item, index) => index;

    _onPressItem (item, index) {

    }
}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        backgroundColor: color.view_background,
    },
    item: {
        marginHorizontal: 12,
        marginTop: 10,
        backgroundColor: color.white,
        borderRadius: 4,
    },
    item_text: {
        marginLeft: 10,
        marginTop: 10,
        fontSize: 16,
    },
    item_image_view: {
        marginTop: 10,
        width: Dimensions.get('window').width-24,
        height: (Dimensions.get('window').width-24)*267/667,
    },
    item_image: {
        width: Dimensions.get('window').width-24,
        height: (Dimensions.get('window').width-24)*267/667,
    },
    item_content_img: {
        width: Dimensions.get('window').width-24,
        height: (Dimensions.get('window').width-24)*61/667,
    },
    item_content: {
        width: Dimensions.get('window').width-34,
        height: (Dimensions.get('window').width-34)*61/667,
        backgroundColor: 'transparent',
        color: color.white,
        lineHeight: (Dimensions.get('window').width-34)*61/667
    }
});